<template>
  <div>
    <el-dialog class="form-dialog" :close-on-click-modal="false" width="860px" :title="title" :visible.sync="visible">
      <div class="content">
        <div class="msg-container">
          <div class="msg-header">
            <span>小程序名称</span>
          </div>
          <div class="msg-body">
            <div class="msg-title">标题</div>
            <div class="msg-list">
              <div v-for="k in selectList" class="msg-item">
                <span class="name">{{ k.name }}</span>
                <span class="value">{{ k.example }}</span>
              </div>
            </div>
          </div>
          <div class="msg-footer">
            <span>查看详情</span>
          </div>
        </div>
        <el-form class="keyword-container" label-width="90px" label-position="left">
          <el-form-item label="配置关键词">
            <div class="keyword-list">
              <el-checkbox-group
                v-model="kidList"
                :min="0"
                :max="5"
              >

                <el-checkbox v-for="k in keywordList" :key="k.id" class="item" :label="k.kid">
                  {{ k.name }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item :label="'已选择 (' + kidList.length + '/5)'">
            <span v-if="kidList.length === 0">请先从上方选择关键词</span>
            <draggable
              v-else
              v-model="selectListOrder"
              class="list-group"
              ghost-class="ghost"
              @change="handleChangeOrder"
            >
              <div v-for="(element, index) in selectListOrder" :key="element.kid" class="dragging-item">
                <div style="display: flex; justify-content: space-between;align-items: center">
                  <el-checkbox checked @change="handleUnCheck(index)">{{ element.name }}</el-checkbox>
                  <i style="display: inline-block" class="el-icon-rank" />
                </div>
              </div>
            </draggable>

          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :disabled="kidList.length < 2" :loading="loading" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'MsgConfigDialog',
  components: {
    draggable
  },
  data() {
    return {
      loading: false,
      visible: false,
      appId: '',
      title: '关键词配置',
      mode: '',
      tplTitle: '预订消息通知',
      wxapp: { appName: '测试' },
      kidList: [],
      selectListOrder: [],
      keywordList: []
    }
  },
  computed: {
    selectList() {
      const selectList = []
      for (let i = 0; i < this.kidList.length; i++) {
        const item = this.keywordList.filter(item => item.kid === this.kidList[i])[0]
        if (item) {
          selectList.push(item)
        }
      }
      this.selectListOrder = selectList
      return selectList
    }
  },
  methods: {
    defaultForm() {
      return {}
    },
    handleUnCheck(index) {
      this.kidList.splice(index, 1)
    },
    handleChangeOrder() {
      const kidList = []
      for (const i in this.selectListOrder) {
        kidList.push(this.selectListOrder[i].kid)
      }
      this.kidList = kidList
    },
    open(keywordList, kidList) {
      const kidListNew = []
      for (let i = 0; i < kidList.length; i++) {
        const item = keywordList.filter(item => item.kid === kidList[i])
        if (item.length > 0) {
          kidListNew.push(item[0].kid)
        }
      }
      this.keywordList = keywordList
      this.kidList = kidListNew
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.title = '模板配置'
        this.form = this.defaultForm()
      })
    },
    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
    },
    handleConfirm() {
      this.resolve && this.resolve([].concat(this.selectList))
      this.close()
    }
  }
}
</script>
<style lang="scss" scoped>
  .content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .content ::v-deep .el-checkbox__label {
    color: #606266 !important;
  }

  .msg-container {
    border: 1px solid #E7E7EB;
    border-radius: 5px;
    width: 320px;
  }

  .msg-header {
    height: 60px;
    display: flex;
    padding: 0 15px;
    align-items: center;
    border-bottom: 1px solid #E7E7EB;
  }

  .msg-footer {
    border-top: 1px solid #E7E7EB;
    height: 40px;
    display: flex;
    padding: 0 15px;
    align-items: center;
  }

  .msg-body {
    min-height: 220px;
    padding: 15px;
  }
  .msg-list {
    padding: 20px 0;
    font-size: 13px;
  }

  .msg-item {
    line-height: 1.6;

    .name {
      color: #9A9A9A;
      width: 120px;
    }
  }

  .keyword-container {
    box-sizing: border-box;
    background-color: #f6f8f9;
    margin-left: 30px;
    width: 420px;
    padding: 15px;
    border-radius: 5px;
	
	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
		background-color: $btnBgc;
		border-color: $btnBgc;
	}
  }
  ::v-deep .el-dialog__headerbtn .el-dialog__close:hover{
	  color: $btnBgc;
  }

  .keyword-list {
    height: 220px;
    overflow: auto;
    background: #fff;
    padding: 15px;
    border-radius: 5px;

    .item {
      display: block;
    }
  }

  .buttons {
    margin-top: 35px;
  }

  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }

  .dragging-item {
    background-color: #ffffff;
    margin-bottom: 4px;
    width: 100%;
    cursor: move;
    padding: 0 15px;
    border-radius: 3px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>

